<template>
	<view class="wait">
		<!-- 信息显示 -->
		<view class="showuserinfo">
			<!-- 姓名 -->
			<view class="namesty">
				<!-- 图标 -->
				<view class="">
					 <image style="width: 100upx; height: 100upx; "  src="../../static/myicons/nick2.png">
					 </image>
				</view>
				<view class="ziti"> {{volunNickName}} </view>
			</view>
			<!--联系电话 -->
			<view class="phonesty">
				<!-- 图标 -->
				<view class="">
					<image style="width: 100upx; height: 100upx; "  src="../../static/myicons/dian2.png">
					</image>
				</view>
				<view class="ziti"> {{volunPhone}} </view> 	
			</view>
		</view>
	 <!-- 拨打电话 -->
		<view @click="makePhone()" >
			<image style="width: 100upx; height: 100upx; "  
			src="../../static/myicons/phone3.png">
			</image>
		</view>
	<!--  <button type="primary"  @click="makePhone()">拨打电话</button> 
		<view style="margin-top: 5upx;">请等待</view> -->
		<view class="qrimg">	
		   <tki-qrcode :val="valu" :size="qrsize" ref="qrcode" loadMake 
		   onval  background="#1aad19"  foreground="#FFFFFF" pdground="#ffffff"></tki-qrcode>
		   <!-- background="#00FF00" foreground="#FFFFFF" -->
		</view>
		  <button   @click="clicktermination()" class="termination" >帮助结束</button> 
	</view>
</template>

<script>
	import tkiQrcode from "../../node_modules/tki-qrcode/components/tki-qrcode/tki-qrcode.vue"
	export default {
		data() {
			return {
				  qrsize: 350, // 二维码大小
				  valu:'1234',//二维码的值 
				  volunNickName:'123', //志愿者昵称
				  volunPhone:'17828896824',//志愿者电话
				  eventId :'' ,//事件id
			}
		},
		onLoad(option) {	
			console.log("老人等待帮助 打印传入参数"); 
			console.log(option.eventId); //打印出上个页面传递的参数。
			this.getEventData(option.eventId)
			this.eventId = option.eventId;
			//将参数中动态二维码的数字获取到
		},
		methods: {
			test(){
				console.log("123");
			},
			//b帮助结束跳转评分页面
			clicktermination(){
				console.log("this.eventId")
			 uni.navigateTo({
			 	url: '../rate/rate?eventId=' + this.eventId
			 });
			 	console.log("结束")
			},
			//拨打电话
			makePhone(){
				 uni.makePhoneCall({	
				  // 手机号
					phoneNumber: this.volunPhone, 
				 // 成功回调
				 success: (res) => {
				 console.log('调用成功!')	
				 },
				 // 失败回调
				 fail: (res) => {
				 console.log('调用失败!')
				 }
				   });
			},
		   //获取该帮助请求的所有信息
		   getEventData(id){
			 uniCloud.callFunction({
			     name:"waitHelp",
			 	data:{
			 		eventId:id,
			 	 	type:0, //为查询获取该事件的随机码、用户id  1为微信扫码结果提交
			 	},
			 	success: (res) => {
					console.log("事件信息");
			 		console.log(res.result.data[0].randomNumber);
				    this.valu =	res.result.data[0].randomNumber;
					console.log(this.valu);
					//获取志愿者名字 电话
					uniCloud.callFunction({
					    name:"findUserInfo",
						data:{
							userId:res.result.data[0].volunId,
						},
						success: (res) => {
							console.log("用户信息");
							console.log(res);
							this.volunNickName = res.result.data[0].nickname;
							this.volunPhone = res.result.data[0].username
						}
					});	
					
					
			 	},
			 	fail: (err) => {
			 		console.log(err);
			 	} 
			 });	
			 
			 
		   }
		},
		components: {
			tkiQrcode
			}
	}
</script>

<style>
.wait{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 45upx;
	margin-top: 5%;
	background-color: #F7F7F7;
	}
 .qrimg{
	margin-top: 5%;
	border:1px solid green;
 }
 .ziti{
	font-size: 25px;
	font-weight: 550;
	color: #1aad19;
	margin-left: 20upx;
 }
 .termination{
	 margin-top: 140upx;
	 border-radius: 25px;
	 background-color: #f5da3f;
	 border:1px solid #f5da3f;
	 color: #FFFFFF;
	 width: 60%;
 }
 .namesty{
	 display: flex;
	 align-items: center;
	 height: 120upx;
	 width: 80%; 
	 margin-top: 30upx;
	 
 }
 .phonesty{
	 display: flex;
	
	 align-items: center;
	 height: 140upx;

	 width: 80%;
 }
 .showuserinfo{
	  border:1px solid green;
	  border-radius: 8%;
	  width: 90%;
	  padding-left: 25upx;
	  margin-bottom: 30upx;
 }
</style>
